<template>
  <MainLayout>
    <router-view></router-view>
    <div class="order-list">
    <h2>订单列表</h2>
    
    <!-- 订单列表 -->
    <el-table
      :data="paginatedOrders"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="订单号" width="100" />
      <el-table-column prop="productName" label="商品名称" />
      <el-table-column prop="quantity" label="数量" />
      <el-table-column prop="totalPrice" label="总价" />
      <el-table-column prop="status" label="状态" />
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button size="small" @click="viewOrder(scope.row)">查看</el-button>
          <el-button size="small" type="danger" @click="deleteOrder(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      class="pagination"
      background
      layout="prev, pager, next"
      :total="orders.length"
      :page-size="pageSize"
      :current-page="currentPage"
      @current-change="handlePageChange"
    />

    <!-- 订单详情模态框 -->
    <el-dialog v-model="isViewing" title="订单详情" width="30%">
      <el-form :model="viewingOrder">
        <el-form-item label="订单号">
          <el-input v-model="viewingOrder.id" disabled />
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="viewingOrder.productName" disabled />
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="viewingOrder.quantity" disabled />
        </el-form-item>
        <el-form-item label="总价">
          <el-input v-model="viewingOrder.totalPrice" disabled />
        </el-form-item>
        <el-form-item label="状态">
          <el-input v-model="viewingOrder.status" disabled />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="closeView">关闭</el-button>
      </template>
    </el-dialog>
  </div>
  </MainLayout>

</template>

<script>
import MainLayout from '@/layouts/MainLayout.vue'
export default {
  components: {
    MainLayout
  },
  data() {
    return {
      orders: [
        { id: 1, productName: '商品A', quantity: 2, totalPrice: 200, status: '已支付' },
        { id: 2, productName: '商品B', quantity: 1, totalPrice: 200, status: '待发货' }
      ],
      isViewing: false,
      viewingOrder: {
        id: null,
        productName: '',
        quantity: '',
        totalPrice: '',
        status: ''
      },
      currentPage: 1,
      pageSize: 5,
      selectedOrders: []
    };
  },
  computed: {
    paginatedOrders() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.orders.slice(start, end);
    }
  },
  methods: {
    viewOrder(order) {
      this.isViewing = true;
      this.viewingOrder = { ...order };
    },
    closeView() {
      this.isViewing = false;
      this.viewingOrder = { id: null, productName: '', quantity: '', totalPrice: '', status: '' };
    },
    deleteOrder(orderId) {
      this.orders = this.orders.filter(order => order.id !== orderId);
    },
    handlePageChange(page) {
      this.currentPage = page;
    },
    handleSelectionChange(selection) {
      this.selectedOrders = selection;
    },
    batchDelete() {
      this.$confirm('确定要删除选中的订单吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const ids = this.selectedOrders.map(order => order.id);
        this.orders = this.orders.filter(order => !ids.includes(order.id));
        this.selectedOrders = [];
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  },
  beforeUnmount() {
    console.log('Component is about to be unmounted');
    this.isViewing = false;
    this.viewingOrder = { id: null, productName: '', quantity: '', totalPrice: '', status: '' };
    this.selectedOrders = [];
  },
  unmounted() {
    console.log('Component has been unmounted');
  }
};
</script>

<style scoped>
.order-management {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 30px;
  background-color: #fff;
  padding-bottom: 100px;
}

.pagination {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 30px;
  margin-top: 24px;
  justify-content: center;
  padding: 16px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.el-dialog {
  border-radius: 8px;
}

.el-dialog__header {
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
  border-radius: 8px 8px 0 0;
  padding: 16px;
}

.el-dialog__body {
  padding: 20px;
}

.el-dialog__footer {
  padding: 16px;
  border-top: 1px solid #ebeef5;
  background-color: #f5f7fa;
  box-shadow: none;
}

.order-management h2 {
  margin-top: 10px;
  margin-bottom: 24px;
  font-size: 24px;
  font-weight: 500;
  text-align: left;
}
</style>